import React, { useEffect, useState } from 'react';

// 引入less样式
import './install.less';
// 引入 antd 组件
import { NavBar, Space, Toast, Switch, Button, Dialog } from 'antd-mobile';
// 引入 icon 图标
import { SetOutline, MessageFill, RightOutline } from 'antd-mobile-icons';
import { history } from 'umi';
import axios from 'axios';

export default function install() {
  // 获取 token
  const [token, setToken] = useState(sessionStorage.getItem('token') || '');
  // 个人信息
  const [personalInfo, setPersonalInfo] = useState(
    JSON.parse(sessionStorage.getItem('userdata') || '{}') || '',
  );
  const [data, setData] = useState({ face: '', username: '', nickname: '' });
  useEffect(() => {
    getPerson();
  }, []);

  // 获取个人信息
  const getPerson = async () => {
    let {
      data: { code, msg, data },
    } = await axios.get(`/api/mine/getPerson?id=${personalInfo._id}`);
    if (code == 200) {
      let dataForm = data[0];
      setData({ ...dataForm });
    }
  };

  // 点击按钮返回
  const back = () => {
    history.push('/hello/mine');
  };

  // 退出用户登录
  const quitLogin = async () => {
    const result = await Dialog.confirm({
      content: '人在天边月上明',
    });
    if (result) {
      // 当点击了确定，就需要把token和userdata移除掉，并跳转到我的页面
      sessionStorage.removeItem('token');
      sessionStorage.removeItem('userdata');
      history.push('/hello/mine');
    }
  };
  // 跳转到个人信息页面
  const goPerson = () => {
    history.push('/person');
  };
  // 跳转到版本
  const goVersion = () => {
    history.push('/version');
  };
  // 跳转到意见反馈
  const gofeedback = () => {
    history.push('/feedback');
  };

  // 允许推送
  const switchChange = (val: boolean) => {
    if (val) {
      Toast.show({
        content: '允许推送成功',
      });
    } else {
      Toast.show({
        content: '拒绝推送成功',
      });
    }
  };

  // 清除缓存
  const setKong = (e: any) => {
    e.target.innerHTML = '0.0M';
    Toast.show({
      content: '清除缓存成功',
    });
  };

  return (
    <div className="install">
      {/* 顶部设置 */}
      <div className="install-top">
        <NavBar onBack={back}>设置</NavBar>
      </div>
      {/* 头像 个人信息 */}
      <div className="headPortrait" onClick={goPerson}>
        {/* 头像 */}
        <div className="head-img">
          <img src={data.face} alt="" />
        </div>
        {/* 名称 */}
        <div className="head-name">
          <h3 style={{ marginTop: '4px' }}>
            {data.username ? data.username : data.nickname}
          </h3>
        </div>
        {/* 箭头 */}
        <div className="head-jian">
          <RightOutline />
        </div>
      </div>
      {/* 信息 */}
      <div className="install-all">
        <div className="install-box" style={{ borderBottom: 'none' }}>
          <div className="install-left">账号与安全</div>
          <div className="install-right">
            <span>{personalInfo.phone}</span>
            <RightOutline
              style={{ verticalAlign: '-0.2em' }}
              fontSize={'18px'}
              color="#cccccc"
            />
          </div>
        </div>
        <div className="install-box">
          <div className="install-left">允许推送</div>
          <div className="install-right">
            <Switch
              onChange={(val) => switchChange(val)}
              defaultChecked
              style={{
                '--checked-color': '#4dd865',
                '--height': '22px',
                '--width': '33px',
              }}
            />
          </div>
        </div>
        <div className="install-box" onClick={gofeedback}>
          <div className="install-left">意见反馈</div>
          <div className="install-right">
            <RightOutline
              style={{ verticalAlign: '-0.2em' }}
              fontSize={'18px'}
              color="#cccccc"
            />
          </div>
        </div>
        <div className="install-box">
          <div className="install-left">清除缓存</div>
          <div className="install-right">
            <span onClick={(e) => setKong(e)}>124M</span>
            <RightOutline
              style={{ verticalAlign: '-0.2em' }}
              fontSize={'18px'}
              color="#cccccc"
            />
          </div>
        </div>
        <div className="install-box">
          <div className="install-left">关于汇流APP</div>
          <div className="install-right">
            <span onClick={goVersion}>{'V1.3.2'}</span>
            <RightOutline
              style={{ verticalAlign: '-0.2em' }}
              fontSize={'18px'}
              color="#cccccc"
            />
          </div>
        </div>
        <div className="install-box">
          <div className="install-left">相关协议</div>
          <div className="install-right">
            <RightOutline
              style={{ verticalAlign: '-0.2em' }}
              fontSize={'18px'}
              color="#cccccc"
            />
          </div>
        </div>
      </div>
      <div className="quit">
        <Button block color="primary" size="large" onClick={quitLogin}>
          退出登录
        </Button>
      </div>
    </div>
  );
}
